<template>
  <div class='container'>
    <h3 class="margin">{{previewData.title}}</h3>
    <span class="span1">{{previewData.createTime | parseTimeByString('{y}-{m}-{d} {h}:{i}:{s}')}}</span>
    <span class="span2">{{previewData.creatorID}}</span>
    <i class="el-icon-view"><span class="span3">{{previewData.visits}}</span></i>
    <div class="articleBox" v-html="previewData.articleBody">
      <!-- <p ></p> -->
    </div>

  </div>

</template>

<script>
export default {
  name: 'articlesPreview',
  props: {
    previewData: {
      type: Object,
      default: null
    }
  }
}
</script>

<style scoped lang='scss'>
.margin {
  margin-top: 0px;
  margin-bottom: 10px;
  font-size: 20px;
}
.span1 {
  margin-right: 10px;
  margin-left: 5px;
}
.span2 {
  margin-right: 10px;
}
.span3 {
  margin-left: 10px;
}
.articleBox {
  background-color: #f5f5f5;
  padding: 10px;
  border-top:1px dashed #ccc ;
  margin-top: 10px;
}
</style>
